const Shape = require("./shape.js")
const Utils = require("./utils.js")
const {EN,ClassMapping,Letter} = require("./constant.js")

module.exports = class Angle extends Shape{
	constructor($env,$event){
		super($env,$event)
		this.name = ClassMapping.angle
		this.__relativePlugins=[{name:"LinePicker"}]
		this.__letters = Letter.greece
		this.transcation = 0
		// this.__setting = Utils.assign(this.__setting,{
		// 	r:2
		// })
		
		this.bind();
	}
	bind(){
		this.baseContext.canvas.addEventListener("click",(e)=>{
			if (!this.isActive) return;
			var pos = {
					x : e.pageX,
			        y : e.pageY
			}

			if(this.transcation===0){
				this.drawStart(this.cvsEvtPos(pos,this.cvs))
				return;
			}

			if(this.transcation===1){
				this.drawing(this.cvsEvtPos(pos,this.cvs));
				return;
			}

			if(this.transcation===2){
				this.drawEnd(this.cvsEvtPos(pos,this.cvs));
				return;
			}
			
		})
		this.baseContext.canvas.addEventListener("mousemove",(e)=>{
			if (!this.isActive) return;
			if(this.transcation===0)return;
			var pos = {
					x : e.pageX,
			        y : e.pageY
			}
			this.updateBaseLine(this.cvsEvtPos(pos,this.cvs),this.transcation)
		})
	}
	updateBaseLine(pos,stage){
		
		if(stage===0)return;
		let step = this.__steps;
		let fp = step[0];
		let bc = this.baseContext;
		this.clearBaseContext()
		this.drawPoint(fp,bc)

		if(stage===1){
			this.drawLine([fp,pos],bc)
		}
		if(stage===2){
			let sp = step[1]
			pos = Utils.assign(this.__setting,pos);

			let dx = pos.x-fp.x;
			let dy = pos.y-fp.y;
			let angle = Utils.atan2(dy,dx);

			sp.e = angle;
			this.rePaint(step,bc)
			this.tip(sp)
		}
	}
	rePaint(step,context){
		let ctx = context||this.ctx;
		let fp = step[0]
		let sp = step[1]

		ctx.save()
		ctx.strokeStyle = fp.strokeStyle
		ctx.fillStyle = fp.fillStyle+"33"
		ctx.setLineDash(fp.lineDash)
		
		ctx.beginPath()
		ctx.moveTo(sp.x,sp.y);
		ctx.arc(sp.x,
			sp.y,
			sp.r,
			sp.s,
			sp.e,false)
		ctx.closePath()
		ctx.stroke()
		ctx.fill()
		ctx.restore()

		this.drawPoint(fp,context)
		ctx.font=this.$env.font;
		ctx.save()
		ctx.fillStyle="#000"
		ctx.translate(fp.x,fp.y)
		let ta = sp.e>sp.s?(sp.s+sp.e)/2:Math.PI+(sp.s+sp.e)/2
		ctx.rotate(ta);
		ctx.save()
		let mt = ctx.measureText(fp.text).width
		ctx.translate(25+mt/2,5-mt/2)
		ctx.rotate(-ta);
		ctx.fillText(fp.text,0,0);
		ctx.restore()
		ctx.restore()
	}
	drawing(pos){
		let step = this.__steps;
		//第二点
		this.drawPoint(Utils.assign(this.__setting,pos),this.baseContext)

		let fp = step[0];
		let sp = step[1];

		let dx = pos.x-fp.x;
		let dy = pos.y-fp.y;

		let r = Math.pow((dx*dx+dy*dy),.5);
		let angle = Utils.atan2(dy,dx);
		sp.r = r;
		sp.s = angle;
		this.transcation = 2;
	}
	drawEnd(pos){
		this.clearBaseContext()
		let step = this.__steps;

		let fp = step[0];
		let sp = step[1];

		let dx = pos.x-fp.x;
		let dy = pos.y-fp.y;
		let angle = Utils.atan2(dy,dx);

		sp.e = angle;

		this.rePaint(step)

		this.transcation=0;

		this.emit(EN.update_state,this,step)
		this.tipHide()
	}
	drawStart(pos){

		let p = Utils.assign(this.__setting,pos);
		let ctx = this.ctx;
		p=this.rewritePos(p)
		p.strokeStyle = ctx.strokeStyle
		p.fillStyle = ctx.fillStyle
		p.lineDash = ctx.getLineDash()
		p.text = this.generateLabel()
		this.drawPoint(p,this.baseContext)
		this.transcation = 1;
		this.__steps=[p,Utils.assign(p)];
	}
	tip(sp){
		let tip = sp.e>sp.s?(sp.e-sp.s):2*Math.PI-(sp.s-sp.e);
			tip = (tip*180/Math.PI).toFixed(5);

		this.$event.emit("tip:show",{text:`顺时针角度： ${tip}`})
	}
}
